<template>
    <div class="container">
        <Header :regist="`支付页面`"></Header>
        <div class="payMain">
            <div class="payBanner">
                <div class="payBannerBox"></div>
            </div>
        </div>
        <div class="w1190 margin paddingBottom30 marginTop30">
            <!--订单详情 start-->
            <div class="orderDetail marginBottom20">
                <div class="orderDetailTit">订单信息</div>
                <div class="orderDetailList">
                    <ul class="clearFix">
                        <li>
                            <font>项目：</font>
                            <span>车融宝NO.12345</span>
                        </li>
                        <li>
                            <font>投资金额：</font>
                            <span>134,598.00元</span>
                        </li>
                        <li>
                            <font>预计到期日：</font>
                            <span>2017.12.31</span>
                        </li>
                        <li>
                            <font>预期收益：</font>
                            <span>1,345.00元</span>
                        </li>
                    </ul>
                </div>
                <div class="orderDetailTit">优惠券</div>
                <div class="orderDetailCoupon">
                    <div class="orderDetailCouponBox clearFix">
                        <span>使用优惠券：</span>
                        <div class="orderDetailCouponList">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in coupons"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="orderDetailUPay">实付款 <span>810.00</span> 元</div>
                </div>
            </div>
            <!--订单详情 end-->
            <!--支付方式 start-->
            <div class="orderDetail marginBottom20">
                <div class="orderDetailTit">支付方式</div>
                <div class="orderDetail-payStyle">
                    <div class="orderDetail-payStyle-overage"><i class="icon iconfont icon-investment"></i>账户余额800.00元</div>
                    <div class="orderDetail-payStyle-needPay">支付 <font>800.00</font> 元</div>
                </div>
                <!--余额不足 银行卡支付 start-->
                <!--无 绑定银行卡 start -->
                <div class="orderDetailUnbindCard">
                    <router-link to="">绑定银行卡</router-link>
                </div>
                <!--无 绑定银行卡 end -->
                <!--已经 绑定银行卡 start -->
                <div class="orderDetailBankCard">
                    <div class="orderDetailBankCardDetail">
                        <span><img src="../../assets/images/bank.png"></span>
                        <p>中国农业银行</p>
                        <p>**0672</p>
                        <p>单笔限5万，单日限20万</p>
                    </div>
                    <div class="orderDetailBankCardPay">支付 <font>10.00</font> 元</div>
                </div>
                <!--已经 绑定银行卡 end -->
                <!--余额不足 银行卡支付 end-->
                <div class="orderDetailTit">支付密码</div>
                <div class="orderDetailUPass">
                    <input type="password" placeholder="请出入密码">
                    <router-link to="">忘记密码？</router-link>
                </div>
            </div>
            <!--支付方式 end-->
            <div class="orderDetailPaySubmit marginBottom10">确认支付</div>
            <div class="orderDetailBottom marginBottom50 paddingBottom50">确认支付即表示您已知悉并确认
                <router-link to="">《风险提示书》</router-link>
                和
                <router-link to="">《借款协议》</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '../common/Head.vue'
    export default{
        components:{
            Header
        },
        data(){
            return{
                coupons:[
                    { value: 1, label: '10元现金券' },
                    { value: 2, label: '20元现金券' },
                    { value: 3, label: '30元现金券' },
                    { value: 4, label: '40元现金券' }
                ],
                value: ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .payMain{
        width: 100%;
        .payBanner{
            width: 100%;
            height: 214px;
            background: url(../../assets/images/payBg.png) repeat;
            .payBannerBox{
                width: 100%;
                height: 214px;
                background: url(../../assets/images/payBanner.png) no-repeat top center;
            }
        }
    }
    .orderDetail{
        border: 1px solid #dfdfdf;
        padding: 20px;
        .orderDetailTit{
            font-size: 20px;
            color: #333;
            line-height: 30px;
            margin-bottom: 10px;
        }
        .orderDetailList{
            font-size: 16px;
            color: #333;
            margin: 10px 0 30px 0;
            li{
                float: left;
                width: 40%;
                line-height: 26px;
            }
        }
        .orderDetailCoupon{
            position: relative;
            margin-top: 10px;
            font-size: 16px;
            color: #333;
            .orderDetailCouponBox{
                span{
                    display: block;
                    float: left;
                    height: 35px;
                    line-height: 35px;
                }
                .orderDetailCouponList{
                    float: left;
                    height: 35px;
                }
            }
            .orderDetailUPay{
                position: absolute;
                right: 0;
                top: 0;
                span{
                    font-size: 30px;
                    color: #ff6235;
                }
            }
        }
        .orderDetail-payStyle{
            background: #f5f5f5;
            font-size: 16px;
            color: #333;
            padding: 10px 20px;
            margin-bottom: 40px;
            position: relative;
            .orderDetail-payStyle-overage{
                line-height: 30px;
                i{
                    color: #f1984a;
                    margin-right: 5px;
                }
            }
            .orderDetail-payStyle-needPay{
                position: absolute;
                right: 20px;
                top: 10px;
                line-height: 30px;
                font{
                    font-size: 20px;
                    color: #ff6235;
                }
            }
        }
        .orderDetailUnbindCard{
            margin-bottom: 40px;
            a{
                display: block;
                width: 178px;
                height: 43px;
                line-height: 43px;
                text-align: center;
                border: 1px solid #dfdfdf;
                color: #da5e2d;
                font-size: 16px;
                &:hover{
                    background: #da5e2d;
                    border: 1px solid #da5e2d;
                    color: #fff;
                }
            }
        }
        .orderDetailBankCard{
            background: #f5f5f5;
            font-size: 16px;
            color: #333;
            height: 30px;
            line-height: 30px;
            padding: 10px 20px;
            margin-bottom: 40px;
            position: relative;
            span{
                display: block;
                width: 18px;
                height: 17px;
                float: left;
                margin-top: 4px;
                margin-right: 8px;
            }
            p{
                float: left;
                margin-right: 50px;
            }
        }
        .orderDetailBankCardPay{
            position: absolute;
            right: 20px;
            top: 10px;
            font{
                color: #ff6235;
            }
        }
        .orderDetailUPass{
            input{
                width: 198px;
                padding: 0 10px;
                height: 43px;
                border: 1px solid #dfdfdf;
                float: left;
                margin-right: 10px;
                color: #333;
                outline: none;
            }
            a{
                line-height: 45px;
                color: #ff6235;
                &:hover{
                    font-weight: bold;
                }
            }
        }
    }
    .orderDetailPaySubmit{
        width: 222px;
        height: 40px;
        background: #ff6235;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        &:hover{
            background: #e44315;
        }
    }
    .orderDetailBottom{
        color: #333333;
        a{
            color: #da5e2d;
            &:hover{
                font-weight: bold;
            }
        }
    }
</style>
<style>
    .orderDetailCouponList .el-select>.el-input{
        width: 218px;
    }
    .orderDetailCouponList .el-input__inner{
        height: 33px;
        line-height: 33px;
        width: 218px;
    }
</style>